<template>
	<view class="title" :style="`background:${titleBackground}`">
		<view class="title_center">
			<view class="title_center_item" @click.stop="leftClick">
				<uni-icons type="left" v-if="leftShow" :size="lefticonSize" :color="color"></uni-icons>
			</view>
			<view class="title_center_item" style="text-align: center;" :style="`color:${color};font-size:${TextSize}`">
				{{text}}
				<slot name="center"></slot>
			</view>
			<view class="title_center_item" style="display: flex;justify-content: flex-end;" @click.stop="rightClick">
				<uni-icons :type="rightType" :color="color" :size="lefticonSize"></uni-icons>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			leftShow: {
				type: Boolean,
				default: true
			},
			TextSize: {
				type: Number,
				default: 50
			},
			textStyle: {
				type: String,
				default: ''
			},
			lefticonSize: {
				type: Number,
				default: 20
			},
			text: {
				type: String,
				default: ""
			},
			titleBackground: {
				type: String,
				default: "rgba(0,0,0,0)"
			},
			titleSize: {
				type: Number,
				default: 20
			},
			titleColor: {
				type: String,
				default: ''
			},
			rightType: {
				type: String,
				default: ''
			},
			color: {
				type: String,
				default: ''
			}

		},
		name: "appTitle",
		data() {
			return {

			};
		},
		methods: {
			leftClick() {
				uni.navigateBack({
					delta: 1
				})
			},
			rightClick() {
				this.$emit('rightClick');
			}
		}
	}
</script>

<style lang='scss' scoped>
	.title {
		width: 100vw;
		box-sizing: content-box;
		padding-top: var(--status-bar-height);

		.title_center {
			height: 88rpx;
			line-height: 100rpx;
			width: 100%;
			display: flex;
			padding: 0 20rpx;
			align-items: center;

			.title_center_item {
				flex: 1;
			}

		}
	}
</style>